<template>
  <div class="attention">
    <Loading v-if="toloading"></Loading>
    <template v-else>
      <div class="top">
        <h3>豆果美食，会做饭很酷~</h3>
        <span>你关注人的动态会出现在这里</span>
        <span>为你推荐了一些有趣的人，快关注TA们吧</span>
      </div>
      <div class="list">
        <ul>
          <AttentionItem
            v-for="item in list"
            :key="item.id + Math.random() * 10"
            :item="item"
          ></AttentionItem>
          <Loading v-if="moreLoading"></Loading>
          <li class="tomore" v-else @click="tomore">加载更多</li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import AttentionItem from "@/components/AttentionItem.vue";
import Loading from "@/components/Loading.vue";
export default {
  components: {
    AttentionItem,
    Loading,
  },
  data: function () {
    return {
      page: 10,
      list: [],
      toloading: false,
      moreLoading: false,
    };
  },
  created: function () {
    this.toloading = true;
    this.axios
      .get(`https://apis.netstart.cn/douguo/home/ffeeds/${this.page}/20`)
      .then((res) => {
        // console.log(res.data);
        this.list = res.data.result.rfs;
        this.toloading = false;
      });
  },
  methods: {
    tomore() {
      this.moreLoading = true;
      this.axios
        .get(`https://apis.netstart.cn/douguo/home/ffeeds/${this.page}/20`)
        .then((res) => {
          // console.log(res.data);
          // this.banner = res.data.result.banner;
          this.list = [...this.list, ...res.data.result.rfs];
          this.moreLoading = false;
          this.page += 20;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.attention {
  margin-top: calc(9vw + 15px + 45px);
  .top {
    padding: 10px 15px;
    padding-bottom: 15px;
    width: 100vw;
    background-color: #fafafa;
    h3 {
      font-size: 12px;
      font-weight: bold;
      margin: 5px 0;
    }
    span {
      display: block;
      font-size: 12px;
      color: #aaa;
      transform-origin: left;
      line-height: 12px;
      transform: scale(0.8);
    }
  }
  .tomore {
    text-align: center;
    color: #aaa;
    padding: 5px 0;
  }
}
</style>